<template>
    <div class="app-container" style="padding: 20px;">
      <div style="margin-bottom: 10px;">
                <el-button @click="()=>createA('/ddl2json')">ddl2json</el-button>
         </div>
        <div style="margin-bottom: 10px;">
            <el-button @click="()=>triggerModify()" type="primary">添加</el-button>
        </div>
        <div style="display: flex;margin-bottom: 10px;">
            <el-input type="text" v-model="filter.keyword" placeholder="key" @keyup.enter.native="()=>{$data.filter.pageNum=0;lists=[];ajaxList();}"/>
            <el-button @click="()=>{$data.filter.pageNum=0;lists=[];ajaxList();}" type="primary">search</el-button>
        </div>
        <el-table
                :data="lists"
                tooltip-effect="dark"
                ref="multipleTable"
                style="width: 100%"
                @selection-change="(rows)=>selectRows=rows">
            <el-table-column
                    type="selection"
                    width="25">
            </el-table-column>

            <!--   <el-table-column
                       label="id" prop="id">
               </el-table-column>-->

            <el-table-column
                    label="uuid" prop="uuid"     width="50">
                <template slot-scope="scope">
                    <div style="cursor: pointer;width: 50px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="()=>copytext(scope.row)">{{scope.row.uuid}}</div>
                </template>
            </el-table-column>

            <el-table-column
                    label="title" prop="title">
                <template slot-scope="scope">
                    <el-popover
                            :title="scope.row.title"
                            width="500"
                            placement="right"
                            trigger="hover"
                            :content="scope.row.content">
                        <span  slot="reference" style="cursor: pointer;" @click="()=>createA(`/storyEdit?uuid=${scope.row.uuid}`)">{{scope.row.title}}</span>

                    </el-popover>

                </template>
            </el-table-column>

            <!--       <el-table-column
                           label="content" prop="content">
                   </el-table-column>-->

            <!--   <el-table-column
                       label="mulu" prop="mulu">
               </el-table-column>-->
            <!--     <el-table-column
                         label="create_time" prop="create_time">
                 </el-table-column>-->
            <el-table-column
                    label="update_time" prop="update_time" width="150">
                <template slot-scope="scope">
                    <span>{{moment(scope.row.update_time).format('MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="操作"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="()=>createA(`/storyOne?uuid=${scope.row.uuid}`)">预览</el-button>
                    <el-button type="text" @click="()=>triggerModify(scope.row)">修改</el-button>
                    <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @confirm="()=>{
                                removeOne(scope.row)
                            }"
                    >
                        <el-button type="text" slot="reference" style="margin-left: 10px;">删除</el-button>
                    </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="padding: 20px;"
                :page-size="filter.pageSize"
                layout="prev, pager, next"
                :total="filter.total"
                @size-change="(pageSize)=>{$data.filter.pageSize=pageSize;lists=[];ajaxList();}"
                @current-change="(pageNum)=>{$data.filter.pageNum=pageNum;lists=[];ajaxList();}"
        >
        </el-pagination>

    </div>
</template>
<script>

    import {copy2bang, createA, uuid} from "../../utils/utils";
    import moment from 'moment'

    export default {
        components: {},
        data() {
            return {
                moment,
                createA,
                filter: {
                    pageNum: 0,
                    pageSize: 10,
                    total: 0,
                    keyword: "",
                },
                lists: [],
                selectRows: [],
                showModify: false,
            }
        },
        mounted() {
            this.ajaxList();
        },
        methods: {
            triggerModify(row) {
                var _uuid = ""
                if (!row) {
                    _uuid = uuid()
                } else {
                    _uuid = row.uuid
                }
                debugger
                this.$router.push(`storyEdit?uuid=${_uuid}`)
            },
            removeOne(row) {
                axios.get(`/story/remove?uuid=${row.uuid}`).then(res=>{
                    this.$message('删除成功')
                    this.ajaxList()
                })
            },
            copytext(row) {
                copy2bang(`[${row.title}](/storyOne?uuid=${row.uuid})`)
                this.$message('复制id成功')
            },
            async ajaxList() {
                var _params = {
                    keyword: this.filter.keyword
                }
                console.log("[get]  /story/page")
                console.log('参数', JSON.stringify(_params))
                var result = await axios.get('/story/list?pageNum=' + this.filter.pageNum + '&&pageSize=' + this.filter.pageSize + '', {
                    params: _params
                }).then(res => res.data).then(res => res.result)
                console.log("结果", result)
                this.lists = result.records
                this.filter.total = Number(result.total)

            }
        }
    }
</script>

